<template>
  <div class="container">
    <!-- 三级分类全局组件 -->
    <Category class="category" :scene="scene"></Category>
    <div class="table-box">
      <!-- 第一部分 -->
      <div class="first-table" v-show="scene === 0">
        <div class="addButton">
          <el-button
            type="primary"
            size="default"
            icon="Plus"
            @click="addSpu"
            :disabled="categoryStore.c3Id ? false : true"
          >
            添加SPU</el-button
          >
        </div>
        <div class="two-box">
          <el-table class="two-table" border :data="data.records">
            <el-table-column
              label="序号"
              width="80px"
              type="index"
              align="center"
            ></el-table-column>
            <el-table-column
              label="SPU名称"
              prop="spuName"
              width="160"
            ></el-table-column>
            <el-table-column
              label="SPU描述"
              prop="description"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="SPU操作" width="220">
              <template #default="scope">
                <el-button
                  icon="Plus"
                  title="添加SKU"
                  size="small"
                  @click="addSku(scope.row)"
                ></el-button>
                <el-button
                  type="primary"
                  icon="Edit"
                  title="修改SPU"
                  size="small"
                  @click="updateSpu(scope.row)"
                ></el-button>
                <el-button
                  type="info"
                  icon="View"
                  title="查看SKU列表"
                  size="small"
                  @click="findSku(scope.row)"
                ></el-button>
                <el-popconfirm
                  :title="`你确定删除${scope.row.spuName}?`"
                  width="200px"
                  @confirm="deleteSpu(scope.row)"
                >
                  <template #reference>
                    <el-button
                      type="danger"
                      icon="Delete"
                      title="删除SPU"
                      size="small"
                    ></el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="data.pageNo"
              v-model:page-size="data.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper,->sizes,total"
              :total="data.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <!-- 第二部分 添加SPU|修改SPU子组件-->
      <spu-form
        ref="spu"
        class="two-box-div"
        v-show="scene === 1"
        @changeScene="changeScene"
      ></spu-form>

      <!-- 第三部分 添加SKU子组件-->
      <sku-form
        ref="sku"
        class="two-box-div"
        v-show="scene === 2"
        @changeScene="changeScene"
      ></sku-form>
    </div>
    <el-dialog v-model="show" title="SKU列表">
      <el-table :data="skuArr">
        <el-table-column label="SKU名字" prop="skuName"></el-table-column>
        <el-table-column label="SKU价格" prop="price"></el-table-column>
        <el-table-column label="SKU重量" prop="weight"></el-table-column>
        <el-table-column label="SKU图片">
          <template #default="scope">
            <img
              :src="scope.row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <div class="three-box" ></div> -->
  </div>
</template>

<script setup lang="ts">
import { watch, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import useCategoryStore from "../../../store/modules/category";
import { reqHasSpu, reqSkuList } from "../../../api/product/spu/index";
import { reqRemoveAttr } from "../../../api/product/attr/index";
import type {
  HasSpuResponseData,
  SkuData,
  SkuInfoData,
  SpuData,
} from "../../../api/product/spu/type";
// 引入子组件
import SpuForm from "./components/spuForm.vue";
import SkuForm from "./components/skuForm.vue";

const categoryStore = useCategoryStore();

// 获取子组件实例spuForm
const spu = ref<any>();
// 获取子组件实例skuForm
const sku = ref<any>();

let skuArr = ref<SkuData[]>([]);
let show = ref<boolean>(false);

// 分类框是否禁用 0表示不禁用 其他表示禁用
// 0:显示已有SPU 1:添加或者修改已有SPU 2:添加SKU的结构
// 场景的数据
const scene = ref<number>(0);
// 表格属性
const size = ref("default");
const background = ref(true);
const disabled = ref(false);

const data = reactive({
  total: 0,
  pageNo: 1,
  pageSize: 15,
  records: [], // 表格的数据
  show: false,
});

// 监听三级分类的id去获取已有属性的值
watch(
  () => categoryStore.c3Id,
  () => {
    //保证三级分类得有才能发请求
    if (!categoryStore.c3Id) {
      data.records = [];
      return;
    }
    getHasSpu();
  },
);

// 此方法执行:可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async () => {
  await reqHasSpu(data.pageNo, data.pageSize, categoryStore.c3Id).then(
    (res: HasSpuResponseData) => {
      data.total = res.data.total;
      data.records = res.data.records as [];
    },
  );
};

// 表格分页
const handleSizeChange = (val: number) => {
  data.pageSize = val;
  getHasSpu();
};
const handleCurrentChange = (val: number) => {
  data.pageNo = val;
  getHasSpu();
};
// 添加新的SPU按钮的回调
const addSpu = () => {
  scene.value = 1;
  spu.value.initAddSpu(categoryStore.c3Id);
};

// 子组件点击后改变场景值
const changeScene = (obj: any) => {
  scene.value = obj.flag;
  if (obj.params == "update") {
    //更新留在当前页
    getHasSpu();
  } else {
    //添加留在第一页
    getHasSpu();
  }
};
// 更新spu
const updateSpu = (row: SpuData) => {
  //切换为场景1:添加与修改已有SPU结构->SpuForm
  scene.value = 1;
  // 调用子组件的方法
  spu.value.initHasSpuData(row);
};
// 添加sku
const addSku = (row: SpuData) => {
  //切换为场景2:添加sku结构->skuForm
  scene.value = 2;
  sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
};
// 查找sku
const findSku = async (row: SpuData) => {
  let res: SkuInfoData = await reqSkuList(row.id as number);
  if (res.code === 200) {
    skuArr.value = res.data;
    show.value = true;
  }
};
const deleteSpu = async (row: SpuData) => {
  let res: any = await reqRemoveAttr(row.id as number);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 删除成功后去判断当前该溜在第几页
    data.pageNo = data.records.length > 1 ? data.pageNo : data.pageNo - 1;
    getHasSpu();
  } else {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  // box-shadow: var(--el-box-shadow-light);// card阴影

  .category {
    height: 90px;
    width: 100%;
    box-sizing: border-box;
  }

  .table-box {
    margin: 10px 0 0 0;
    padding: 15px 15px 5px;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-light); // card阴影
    border-radius: 5px;

    .first-table {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .two-box-div {
      height: 100%;
      width: 100%;
      // display: flex;
      // flex-direction: column;
    }

    .addButton {
      height: 40px;
      width: 100%;
      margin-bottom: 10px;
      padding: 3px 0;
      box-sizing: border-box;
    }

    .demo-pagination-block {
      height: 40px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      margin-top: 5px;

      .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
      }

      .demo-pagination-block .demonstration {
        margin-bottom: 16px;
      }
    }

    .two-box {
      flex: 1;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      // 表格的样式
      .two-table {
        // height: 95%;
        // width: 100%;
        flex: 1;
      }
    }
  }

  .three-box {
    flex: 1;
    padding: 20px;
    border-radius: 5px;
    height: auto;
    margin-top: 10px;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--el-box-shadow-light); // card阴影

    .buttons {
      height: 35px;
    }
  }
}
</style>
